import React, { Component } from "react";
import Modal from "./Modal";

class App extends Component {
  state = {
    visible: false,
  };

  open = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  handleOk = () => {
    console.log("确定");
    this.setState({
      visible: false,
    });
  };

  fn = () => {
    console.log("fn");
  };

  render() {
    return (
      // 使用portal的时候，元素离开了，冒泡机制还在
      <div className="wrap" onClick={this.fn}>
        <h2>modal对话框</h2>
        <button onClick={this.open}>打开</button>
        <Modal
          visible={this.state.visible}
          title="Basic Modal"
          onCancel={this.handleCancel}
          onOk={this.handleOk}
          okText="ok"
          cancelText="不ok"
          width={500}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

export default App;
